/*
UI:
 aawe           aawe ui for all components
 aawe-text      aawe ui for input textfield
 aawe-image     aawe ui for image button
*/
/* overwrite*/
.x-fullscreen{
    background: transparent;
}

/*main background*/
.x-panel-aawe.firstTime{
    background: url(../images/firstTimeBg@2x.png) left bottom no-repeat;
    background-size: 320px auto;
}
body{
    background: url(../images/bg@2x.png) left top repeat-x;
    background-size: cover;
}

/* buttons */
/* simle button*/
.x-button-aawe{
    color:#26263E;
    border:0;
	background-image: -webkit-gradient(linear, left top, right top, from(#998962 /*{a-bar-background-start}*/), to(#F8EBC3 /*{a-bar-background-end}*/)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(left, #998962 /*{a-bar-background-start}*/, #F8EBC3 /*{a-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(left, #998962 /*{a-bar-background-start}*/, #F8EBC3 /*{a-bar-background-end}*/); /* FF3.6 */
	background-image:     -ms-linear-gradient(left, #998962 /*{a-bar-background-start}*/, #F8EBC3 /*{a-bar-background-end}*/); /* IE10 */
	background-image:      -o-linear-gradient(left, #998962 /*{a-bar-background-start}*/, #F8EBC3 /*{a-bar-background-end}*/); /* Opera 11.10+ */
	background-image:         linear-gradient(left, #998962 /*{a-bar-background-start}*/, #F8EBC3 /*{a-bar-background-end}*/);
    /*shadow*/
    -webkit-box-shadow: #000 0 2px 4px 0;
	box-shadow: #000 0 2px 4px 0; /* inset is optional */

    padding:.1em .7em;
}
.x-button-aawe .x-button-label{
    text-shadow: none;
    font-size:1em;
    font-weight:normal;
    line-height:1.2em;
}
.x-button-aawe.x-button-pressed{
    background-color:#7D7850;
    background-image:none;
    color:#C7CCEA;
    -webkit-box-shadow: #000 0 2px 4px 0;
	box-shadow: #000 0 2px 4px 0; /* inset is optional */
}
/* image button*/
.x-panel-aawe .x-button-aawe-image{
    background-repeat: no-repeat;
    background-image:none;
    box-shadow:none;
    -webkit-box-shadow:none;
    -webkit-border-radius:none;
    padding:0;
    margin: 0;
    border-radius:0;
    width:60px;
    height:60px;
    background-color: transparent;
    border:0;
    background-position: center center;
    margin: 2px 4px;
    display: block;
    position: relative;
    overflow: visible;
    background-size: 50px;
}
.x-panel-aawe .x-button-aawe-image .x-button-label{
    display: none;
}
.x-panel-aawe .x-button-aawe-image.x-button-pressed .x-button-label{
    -webkit-box-shadow: 0 0 30px 20px rgba(255,255,255,0.8);
    width: 0px;
    height: 0px;
    display: block;
    overflow: hidden;
    -webkit-box-flex:none;
    border-radius:45px;
    position: relative;
    left:50%;
    top:50%;
}
.x-panel-aawe .x-button-aawe-image.x-button-pressed{
    background-color: transparent;
    /*background-position: center 2px;*/
    /*background-size: 95%;*/
    -webkit-box-shadow:none;
}


/* pre defined image buttons for all app*/
.x-panel-aawe .x-button-aawe-image.homeBtn{
    background-image: url(../images/homeBtn@2x.png);
}
.x-panel-aawe .x-button-aawe-image.editBtn{
    background-image: url(../images/editBtn@2x.png);

}
.x-panel-aawe .x-button-aawe-image.addBtn{
    background-image: url(../images/addBtn@2x.png);
}
.x-panel-aawe .x-button-aawe-image.deleteBtn{
    background-image: url(../images/deleteBtn@2x.png);
}
.x-panel-aawe .x-button-aawe-image.okBtn{
    background-image: url(../images/saveBtn@2x.png);
}
.x-panel-aawe .x-button-aawe-image.backBtn{
    background-image: url(../images/backBtn@2x.png);
}
.x-panel-aawe .x-button-aawe-image.nextBtn{
    background-image: url(../images/nextBtn@2x.png);
}
.x-panel-aawe .x-button-aawe-image.freshBtn{
    background-image: url(../images/resetBtn@2x.png);
}
.x-panel-aawe .x-button-aawe-image.arrowBtn{
    background-image: none;
    text-align: center;
    line-height: 45px;
}
.x-panel-aawe .x-button-aawe-image.arrowBtn:after{
    content:'>';
    font-size: 1.2em;
}
.x-panel-aawe .x-button-aawe-image.saveBtn{
    background-image: url(../images/saveBtn@2x.png);
}
.x-panel-aawe .x-button-aawe-image.logsBtn{
    background-image: url(../images/logsBtn@2x.png);
}
.x-panel-aawe .x-button-aawe-image.settingBtn{
    background-image: url(../images/settingBtn@2x.png);
}
.x-panel-aawe .x-button-aawe-image.feedbackBtn{
    background-image: url(../images/feedbackBtn@2x.png);
}
.x-panel-aawe .x-button-aawe-image.shopBtn{
    background-image: url(../images/shopBtn@2x.png);
}
.x-panel-aawe .x-button-aawe-image.giftBtn{
    background-image: url(../images/giftBtn@2x.png);
}
.x-panel-aawe .x-button-aawe-image.addKidBtn{
    background-image: url(../images/addKidBtn@2x.png);
}
.x-panel-aawe .x-button-aawe-image.cancelBtn{
    background-image: url(../images/cancelBtn@2x.png);
}
.x-panel-aawe .x-button-aawe-image.choosePhotoBtn{
    background-image: url(../images/choosePhotoBtn@2x.png);
}
.x-panel-aawe .x-button-aawe-image.closeBtn{
    background-image: url(../images/closeBtn@2x.png);
}

.x-panel-aawe .x-button-aawe-image.timerBtn{
    background-image: url(../images/timerBtn@2x.png);
}

.x-panel-aawe .x-button-aawe-image.tackPhotoBtn{
    background-image: url(../images/tackPhotoBtn@2x.png);
}
.x-panel-aawe .x-button-aawe-image.chartEntities{
    background-image: url(../images/entitiesBtn@2x.png);
}
.x-panel-aawe .x-button-aawe-image.twitterBtn{
    background-image: url(../images/twiterBtn@2x.png);
}
.x-panel-aawe .x-button-aawe-image.facebookBtn{
    background-image: url(../images/facebookBtn@2x.png);
}
.x-panel-aawe .x-button-aawe-image.emailBtn{
    background-image: url(../images/emailBtn@2x.png);
}

#btnPanel.ipad .x-button-aawe-image.settingBtn{
    background-image: url(../images/settingBtn@120.png);
    background-size: 44px;
    backgroupd-position: 0% 0%;
    margin-bottom: 15px;
    width: 44px !important;
    height: 44px !important;
}

#btnPanel.ipad .x-button-aawe-image.feedbackBtn{
    background-image: url(../images/feedbackBtn@120.png);
    background-size: 44px;
    backgroupd-position: 0% 0%;
    margin-bottom: 15px;
    width: 44px !important;
    height: 44px !important;
}

#btnPanel.ipad .x-button-aawe-image.shopBtn{
    background-image: url(../images/shopBtn@120.png);
    background-size: 44px;
    backgroupd-position: 0% 0%;
    margin-bottom: 15px;
    width: 44px !important;
    height: 44px !important;
}

#btnPanel.ipad .x-button-aawe-image.giftBtn{
    background-image: url(../images/giftBtn@120.png);
    background-size: 44px;
    backgroupd-position: 0% 0%;
    margin-bottom: 15px;
    width: 44px !important;
    height: 44px !important;
}

/* base page layout */
.x-toolbar-aawe{
    border:0;
}
.x-toolbar-aawe.x-docked-top{
    background-image:url(../images/top@2x.png) , url(../images/top_border@2x.png);
    background-repeat: no-repeat;
    background-position: left 15px,left bottom;
    background-size: 254px,100% 2px;
}
.x-toolbar-aawe.x-docked-top .x-button-aawe-image{
    bottom: 0;
    right:0;
    position: absolute;
}
.x-toolbar-title{
    text-align: left;
    color:#26263E;
    font-weight:200;
    top:auto;
    font-size: 24px;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
    height:50px;
    line-height: 2.4em;
}
.x-toolbar-title span{
    padding-left: 42px;
}

.x-toolbar-aawe.x-docked-bottom{
    background-color: transparent;
    background-image:none;
    background-position: right 5px;
    background-repeat: no-repeat;
    border:0;
    padding:0;
    background-size: auto 60px;
    overflow: visible;
}
.x-toolbar-aawe.x-docked-bottom .x-layout-box-inner{
    -webkit-box-align:start !important;
    background:url(../images/bottom_border@2x.png) right top no-repeat;
    background-size: 100% auto;
    padding-top:5px;
}
.x-toolbar-aawe.x-docked-bottom .x-layout-box-inner .x-button-aawe-image{
    position: relative;
    top:-8px;
}
/* custom list css*/
.x-list-aawe{
    background: transparent;
    color:#CCCCEC;
}
.x-list-aawe .x-list-item{
    border:0;
    color:#CCCCEC;
    border-bottom:1px solid #4F5473;
    font-size: 22px;
    display: -webkit-box;
    -webkit-box-align:center;
    padding: 0;
    height: 56px;
}
.x-list-aawe .x-list-item .x-list-item-body{
    max-height: 100%;
    overflow: hidden;
    display: -webkit-box;
}
.x-list-aawe .x-list-item .x-list-item-body .item-label{
    -webkit-box-flex:1;
    overflow: hidden;
}
.x-list-aawe .x-list-item:last-child{
    border-bottom:1px solid #4F5473;
}
.hidden{
    display: none !important;
}
.win-surface .checkbox{
    width:43px;
    height:32px;
    text-indent: -999px;
    overflow: hidden;
    background:url(../images/chkbox.png) center center no-repeat;
}

.win-surface .checked{
    background:url(../images/chkbox_checked.png) center center no-repeat;
}

.x-panel-aawe .-small-header{
    background-image:url(../images/top_small@2x.png),
    url(../images/top_border.png);
    background-repeat: no-repeat;
    background-position: left 45px,left 100px;
    background-size:auto 48px,auto 2px;
    position: relative;
}
.x-panel-aawe .-small-header .x-toolbar-title{
    text-indent: 4px;
    line-height: 1.7em;
    height: auto;
}
.x-panel-aawe .-small-header .x-toolbar-title h1{
    font-weight: 200;
}
.x-panel-aawe .-small-header div.-page-title {
    color: black;
    font-size: 2em;
    left:10px;
    min-width:400px;
    position:relative;
    top:47px;
}
    .x-panel-aawe .-small-header div.x-button-aawe-image {
        position: absolute;
        right: 10px;
        bottom: 23px;
    }
/*pop up overide the popup box Ext.Msg.confirm*/
body div.x-sheet.x-msgbox,.x-form-aawe.x-floating.x-panel{
    border-radius: 6px;
    -webkit-border-radius: 6px;
    border: 3px solid #E3E3A7;
    width:279px;
    height:120px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#26263E /*{a-bar-background-start}*/), to(#565B7B /*{a-bar-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #26263E, #565B7B );
    background-image: linear-gradient( top,#26263E, #565B7B );
}
.x-form-aawe .x-form-label{
    background: transparent;
    color:#F3E6BE;
    border: 0;
    font-size: 1.2em;
}
.x-panel-aawe .x-form-label,.x-form-aawe .x-form-label{
    text-align: right;
}
.x-form-aawe .x-field{
    border:0;
}
.x-form-aawe .x-field input{
    background: #555A79;
    color: #CCCCEC;
}
.x-form-aawe .x-panel-body{
    background: transparent;
    border: 0;
    padding:0;
}
.x-form-aawe .x-field-select::before,.x-form-aawe .x-field-select::after{
    display: none;
}
.x-form-aawe .x-field .percent{
    padding:.4em;
    font-size: 114%;
    color:#F3E6BE;
}
.x-form-aawe.right_align input{
    text-align: right;
}
/*body div.x-sheet.x-msgbox .x-msgbox-title{*/
    /*display:none;*/
/*}*/
 div.x-sheet.x-msgbox .x-button{
color:#26263E;
border:0;
     background-image: -webkit-gradient(linear, left top, right top, from(#998962 /*{a-bar-background-start}*/), to(#F8EBC3 /*{a-bar-background-end}*/)); /* Saf4+, Chrome */
     background-image: -webkit-linear-gradient(left, #998962 /*{a-bar-background-start}*/, #F8EBC3 /*{a-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
     background-image:    -moz-linear-gradient(left, #998962 /*{a-bar-background-start}*/, #F8EBC3 /*{a-bar-background-end}*/); /* FF3.6 */
     background-image:     -ms-linear-gradient(left, #998962 /*{a-bar-background-start}*/, #F8EBC3 /*{a-bar-background-end}*/); /* IE10 */
     background-image:      -o-linear-gradient(left, #998962 /*{a-bar-background-start}*/, #F8EBC3 /*{a-bar-background-end}*/); /* Opera 11.10+ */
     background-image:         linear-gradient(left, #998962 /*{a-bar-background-start}*/, #F8EBC3 /*{a-bar-background-end}*/);
/*shadow*/
-webkit-box-shadow: #000 0 2px 4px 0;
box-shadow: #000 0 2px 4px 0; /* inset is optional */

padding:.1em .7em;
    }
div.x-sheet.x-msgbox .x-button .x-button-label{
    text-shadow: none;
    font-size:1em;
    font-weight:normal;
    line-height:1.2em;
}
div.x-sheet.x-msgbox .x-button.x-button-pressed{
    background-color:#7D7850;
    background-image:none;
    color:#C7CCEA;
    -webkit-box-shadow: #000 0 2px 4px 0;
    box-shadow: #000 0 2px 4px 0; /* inset is optional */
}
/*input textfiled */
.x-input-el, .x-field input, .x-field textarea, .x-field select, .x-field .x-field-slider, .x-field-toggle, .x-field-slider{
    min-height: 1.5em !important;
    padding-right: 35px;
}

.x-field{
    min-height: 1.5em !important;
    -webkit-box-align: center !important;
    margin:0 10px;
}
.x-field .x-field-clear-container{
    min-height:1em !important;
    min-width: 0 !important;
    width:33px;
    background-color: transparent;
    position: absolute;
    right:0;
    height:100%;
}

.x-field .x-field-clear-container .x-hidden-visibility{
    display: none !important;
}

/*.x-field .x-input-text{*/
    /*min-height: 1em !important;*/
    /*padding:0 !important;*/
    /*height: 100% !important;*/
/*}*/

/*tab*/
.x-docked-top.x-tabbar-aawe{
    border-bottom: 2px solid #F3E6BE;
}
.x-tabbar-aawe.x-tabbar.x-docked-top .x-tab{
    background:url(../images/tab@2x.png);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 100px auto;
    width:100px;
    height:25px;
    padding: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    margin:8px 0 0 0;
    position: relative;
    color:#26263E;
}
.x-tabbar-aawe.x-tabbar.x-docked-top .x-tab .x-button-label{
    font-size: 22px;
    font-weight: 200;
}
.x-tabbar-aawe.x-tabbar.x-docked-top .x-tab-active{
    -webkit-box-shadow:none;
    background:#26263E url(../images/tabSelected@2x.png) no-repeat;
    height: 27px;
    top:2px;
    margin-top:6px;
    color:#F3E6BE;
}

/*childchart*/
.x-childchart canvas{
    display: block;
}

.x-childchart .tickLabels .yAxis{
    height: 2px;
    background-color: #998962;
}
.x-childchart .tickLabels{
    margin-top:-2px;
}
.x-childchart .tickLabels .yAxis .tickLabel{
    right:auto !important;
    left:0;
    font-size:12px;
    width:20px !important;
    text-align: center!important;
}
.x-childchart .x-chart .x-panel-body{
    margin: 0 30px 0 40px;
}
.x-childchart .unit{
    font-size: .55em;
    color:#A5995D;
    padding: 1em 0 0 40px;
}
.tooltip{
    background:#555B7B;
    padding:4px 8px;
    opacity:0.8;
    width:105px;
    font-size:16px;
    color:#C7CDE9;
}

/*ON/OFF toggle*/

.x-field-onofftoggle{
    background: transparent;
    border: 0;
    font-size: .8em;
    -webkit-box-align: center;
    box-align: center;
}
.x-field-onofftoggle .x-input-onofftoggle.x-slider {
    -webkit-border-radius: .3em;
    border-radius: .3em;
    width: 6em;
    height:2em;
    border: none;
    position: relative;
    border:#CFBC71 2px solid;
    overflow: hidden;
    margin: 0;
}
.x-field-onofftoggle .x-input-onofftoggle.x-slider.x-toggle-on {
    background-position: 0;
    background-color: transparent;
    background-image:none;
}

.x-field-onofftoggle .x-input-onofftoggle.x-slider.x-toggle-off {
    background-color: transparent;
    background-image:none;
}
.x-field-onofftoggle .x-input-onofftoggle .x-thumb{
    height: 100%;
    width: 3em;
}
.x-field-onofftoggle .x-input-onofftoggle .x-thumb::before{
    -webkit-border-radius: .3em;
    border-radius: .3em;
    width: 100%;
    background: #CFBC71;
    background-image:none;
    background-image: -webkit-gradient(linear, left top, right top, from(#998962), to(#ECE0B8));
    background-image: -webkit-linear-gradient(left, #998962, #ECE0B8);
    background-image:      -o-linear-gradient(left, #998962, #ECE0B8 );
    background-image:         linear-gradient(left, #998962, #ECE0B8);
    top:0;
    height:100%;
    border: 0;
    left:0;
    display: block;
}


.x-field-onofftoggle .x-input-onofftoggle .x-thumb .x-toggle-thumb-on{
     position: absolute;
     left:-3em;
     top:0;
     display: block;
     height:100%;
     line-height: 2em;
     width:100%;
     text-align: center;
     color:#f3e6be;
 }
.x-field-onofftoggle .x-input-onofftoggle .x-thumb .x-toggle-thumb-off{
    z-index: -1;
    background: #7D784F;
    color:#B8B9D7;
    display: block;
    height:100%;
    line-height: 2em;
    width: 150%;
    position: relative;
    left:50%;
    padding-left: 33%;
    text-align: center;
}
.x-field-onofftoggle .x-form-label{
    color:#f3e6be;
    background: transparent;
    border:0;
}
.x-field-onofftoggle .x-form-label span{
    font-weight:normal;
    font-size: 1.3em;
}
.titleChildPicker{
    line-height: 1em;
    font-size: 16px;
    color:#f3e6be;
    text-shadow: black 0 2px 4px;
    font-weight: 400;
    position: absolute;
    bottom: 12px;
    height: 38px !important;
}
.titleChildPicker img{
    height: 38px;
    width:38px;
    float: left;
    /*padding:2px 4px 0 2px;*/
    margin: 3px 3px 0 0;
}


/*hint*/
.unblock-hint{
    color: rgb(243, 230, 190);
}
.unblock-hint .x-button-aawe-image.closeBtn .x-button-label{
    display: none;
}
.unblock-hint .x-button-aawe-image.closeBtn{
    position: absolute;
    top: -25px;
    right: -25px;

}
#suite-goBabylog.x-button-aawe.childTimer:after{
    display: block;
    position: absolute;
    background-image: url(../images/clock@2x.png);
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    content: '';
    z-index: 1000;
    top:3px;
    width:30px;
    height:30px;
    right:16px;
}
.titleChildPicker.childTimer:after{
    display: block;
    position: absolute;
    background-image: url(../images/clock@2x.png);
    background-size: 90%;
    background-position: center center;
    background-repeat: no-repeat;
    content: '';
    z-index: 1000;
    top:3px;
    width:20px;
    height:20px;
    left:16px;
}

.buyICON::after,.height .x-tab:nth-child(1)::after,.weight .x-tab:nth-child(2)::after,.head .x-tab:nth-child(3)::after{
    width: 50px;
    height: 39px;
    background-image: url(../images/buy@2x.png);
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    position: absolute;
    margin-left: -20px;
    bottom: -5px;
    right: -10px;
    z-index: 9999;
}
/*highlight icon */
.zIndexTop{
    z-index: 99999 !important;
}